import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/**
 * 流式布局
 * 超出屏幕显示范围会自动折行的布局称为流式布局
 */

class WrapFlowWidget extends StatelessWidget {
  WrapFlowWidget({
    Key ?key,
    @required this.text,
  }) : super(key: key);
  final String ?text;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text(text??""),
        ),
        body: Container(
            padding: EdgeInsets.only(left: 28.0, top: 20.0, right: 28.0),
            child: Wrap(
              spacing: 8.0,
              // 主轴(水平)方向间距
              // direction: Axis.horizontal,
              direction: Axis.vertical,
              runSpacing: 4.0,
              // 纵轴（垂直）方向间距
              alignment: WrapAlignment.start,
              //沿主轴方向左
              children: <Widget>[
                //标签或者芯片
                new Chip(
                  avatar: new CircleAvatar(
                      backgroundColor: Colors.blue, child: Text('A')),
                  ////左侧的图标
                  label: new Text('HamiltonHamilton'),
                  //这个是必填的参数，控件上显示的文本
                  deleteIcon: Icon(Icons.delete),
                  //右侧的删除图标
                  elevation: 6.0,
                  shadowColor: Colors.blue,
                ),
                new Chip(
                  avatar: new CircleAvatar(
                      backgroundColor: Colors.blue, child: Text('M')),
                  label: new Text('Lafayette'),
                ),
                new Chip(
                  avatar: new CircleAvatar(
                      backgroundColor: Colors.blue, child: Text('H')),
                  label: new Text('Mulligan'),
                ),
                new Chip(
                  avatar: new CircleAvatar(
                      backgroundColor: Colors.blue, child: Text('J')),
                  label: new Text('Lau'),
                ),
                new Chip(
                  label: new Text('普通的chip'),
                ),
              ],
            )));
  }
}
